<template>
	<div class="bigDiv">
		<el-form :inline="true" label-width="100px">
			<div class="topNav">
				<el-button type="text" icon="el-icon-search" @click="getList" style="float:right;">搜索</el-button>
				<el-button type="text" icon="el-icon-refresh" @click="reset"
					style="float:right;margin-right:10px;">重置</el-button>
				<!-- <el-button type="text" icon="el-icon-plus" @click="editProduct">新建任务</el-button> -->
			</div>
			<el-form-item label="时间" prop="time">
				<el-date-picker v-model="timeModel" type="daterange" range-separator="至" start-placeholder="开始日期"
					end-placeholder="结束日期" value-format="yyyy-MM-dd hh:mm:ss" size="small">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="任务状态">
				<el-select size="small" v-model="queryParams.missionState" placeholder="请选择状态" filterable
					clearable>
					<el-option v-for="item in stateList" :label="item.dictLabel" :value="item.dictValue">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="任务名称">
				<el-input v-model="queryParams.orderNo" placeholder="任务名称" clearable size="small"
					@keyup.enter.native="getList" />
			</el-form-item>
		</el-form>
		<el-table v-loading="loading" :data="list" border height="calc(100vh - 320px)">
			<el-table-column label="任务编号" align="center" prop="missionNo" fixed="left" width="200"></el-table-column>
			<el-table-column label="项目状态" align="center" prop="projectStateLabel" width="200"></el-table-column>
			<el-table-column label="任务状态" align="center" prop="missionStateLabel" width="200"></el-table-column>
			<el-table-column label="产品名称" align="center" prop="productName" width="200"></el-table-column>
			<el-table-column label="项目名称" align="center" prop="projectName" width="200"></el-table-column>
			<!-- <el-table-column label="类型" align="center" prop="type" width="200"></el-table-column> -->
			<!-- <el-table-column label="任务主题" align="center" prop="orderName" width="200"></el-table-column> -->
			<el-table-column label="关联功能点" align="center" prop="projectFunc" width="200"></el-table-column>
			<el-table-column label="负责人" align="center" prop="adminUserName" width="200"></el-table-column>
			<el-table-column label="协作人" align="center" prop="collaborator" width="200">
				<template slot-scope="scope">{{scope.row.collaboratorName.join(",")}}</template>
			</el-table-column>
			<!-- <el-table-column label="工作类型" align="center" prop="workType" width="200"></el-table-column> -->
			<el-table-column label="开始时间" align="center" prop="startTime" width="200"></el-table-column>
			<el-table-column label="结束时间" align="center" prop="endTime" width="200"></el-table-column>
			<el-table-column label="任务创建时间" align="center" prop="createTime" width="200"></el-table-column>
			<el-table-column label="预估工时" align="center" prop="preOrderTime" width="200">
				<template slot-scope="scope">{{(new Date(scope.row.endTime).getTime() - new Date(scope.row.startTime).getTime()) / 1000 / 60 / 60 / 24 }}</template>
			</el-table-column>
			<el-table-column label="操作" align="center" width="100" fixed="right">
				<template slot-scope="scope">
					<!-- <el-button type="text" size="mini" class="editBtn" @click="editProduct(scope.row)">
						编辑
					</el-button> -->
					<!-- <el-button type="text" size="mini" class="deleteBtn" @click="deleteProduct(scope.row)">
						删除
					</el-button> -->
					<el-button type="text" size="mini" class="detailBtn" @click="lookProduct(scope.row)">
						详情
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize" @pagination="getList" />

		<!-- 任务维护弹窗 -->
		<el-dialog title="任务维护" :visible.sync="productModel" :close-on-click-modal="false"
			:close-on-press-escape="false" width="80%">
			<el-form ref="productForm" :model="productForm" label-width="100px" :rules="rules">
				<el-row>
					<el-col :span="12">
						<el-form-item label="任务主题" prop="projectFunc">
							<el-input v-model="productForm.projectFunc" placeholder="请输入任务名称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="关联项目" prop="program">
							<el-select filterable v-model="productForm.program">
								<el-option value="办公用品新增品牌查询" label="办公用品新增品牌查询"></el-option>
								<el-option value="集采专区新增商品导入功能" label="集采专区新增商品导入功能"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="优先级" prop="level">
							<el-select filterable v-model="productForm.level">
								<el-option value="低" label="低"></el-option>
								<el-option value="中" label="中"></el-option>
								<el-option value="高" label="高"></el-option>
								<el-option value="紧急" label="紧急"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="关联功能点" prop="function">
							<el-select filterable v-model="productForm.function">
								<el-option value="功能点1" label="功能点1"></el-option>
								<el-option value="功能点2" label="功能点2"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<!-- <el-col :span="6">
						<el-form-item label="任务性质" prop="taskInfo">
							<el-select filterable v-model="productForm.taskInfo">
								<el-option value="普通任务(TASK)" label="普通任务(TASK)"></el-option>
								<el-option value="问题缺陷(BUG)" label="问题缺陷(BUG)"></el-option>
							</el-select>
						</el-form-item>
					</el-col> -->
					<el-col :span="6">
						<el-form-item label="任务类型" prop="taskType">
							<el-select filterable v-model="productForm.taskType">
								<el-option value="需求" label="需求"></el-option>
								<el-option value="设计" label="设计"></el-option>
								<el-option value="研发" label="研发"></el-option>
								<el-option value="缺陷" label="缺陷"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<!-- <el-col :span="6">
						<el-form-item label="工作类型" prop="workType">
							<el-select filterable v-model="productForm.workType">
								<el-option value="产品原型" label="产品原型"></el-option>
								<el-option value="UI设计" label="UI设计"></el-option>
								<el-option value="前端开发" label="前端开发"></el-option>
								<el-option value="数据库设计" label="数据库设计"></el-option>
								<el-option value="接口开发" label="接口开发"></el-option>
								<el-option value="对接接口" label="对接接口"></el-option>
								<el-option value="相关联调" label="相关联调"></el-option>
								<el-option value="系统测试" label="系统测试"></el-option>
								<el-option value="运维部署" label="运维部署"></el-option>
								<el-option value="需求调研" label="需求调研"></el-option>
								<el-option value="需求沟通" label="需求沟通"></el-option>
								<el-option value="参加会议" label="参加会议"></el-option>
							</el-select>
						</el-form-item>
					</el-col> -->
					<el-col :span="12">
						<el-form-item label="预计任务工期" prop="endTime">
							<el-date-picker v-model="timeModel" type="datetimerange" range-separator="至"
								start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd hh:mm:ss">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="预估工时" prop="workTime">
							<el-input placeholder="请输入预估工时"
								:value="timeModel.length == 2 ? (new Date(timeModel[1]).getTime()-new Date(timeModel[0]).getTime()) / 1000 / 60 / 60 / 24 : '0'"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="6">
						<el-form-item label="指派给" prop="manager">
							<el-select filterable v-model="productForm.manager">
								<el-option value="霍东博" label="霍东博"></el-option>
								<el-option value="李越" label="李越"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="协作人" prop="collaborator">
							<el-select filterable v-model="productForm.collaborator" multiple>
								<el-option value="霍东博" label="霍东博"></el-option>
								<el-option value="李越" label="李越"></el-option>
							</el-select>
						</el-form-item>
					</el-col>

				</el-row>
				<el-form-item label="附件上传" prop="time">
					<el-upload action="https://jsonplaceholder.typicode.com/posts/">
						<el-button type="primary" size="mini">附件上传</el-button>
					</el-upload>
					<a style="margin-right:20px;cursor:pointer;text-decoration:underline;color:blue;">附件1</a>
					<a style="margin-right:20px;cursor:pointer;text-decoration:underline;color:blue;">附件2</a>
					<a style="margin-right:20px;cursor:pointer;text-decoration:underline;color:blue;">附件3</a>
				</el-form-item>
				<el-form-item label="任务描述" prop="describe">
					<el-input type="textarea" v-model="productForm.describe" placeholder="请输入描述" maxlength="1000"
						show-word-limit></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="productModel = false">取 消</el-button>
				<el-button type="primary" @click="submitProduct()">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 详情 -->
		<el-dialog title="详情" :visible.sync="detailModel" :close-on-click-modal="false" :close-on-press-escape="false"
			width="90%">
			<el-form ref="detailForm" :model="detailForm" label-width="100px" :rules="rules">
				<el-row>
					<el-col :span="24">
						<el-form-item label="任务主题" prop="projectFunc">
							<el-input v-model="detailForm.projectFunc" placeholder="请输入任务名称" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="负责人" prop="adminUser">
							<el-select filterable v-model="detailForm.adminUser" disabled>
								<el-option :value="item.id" :label="item.name" v-for="item in userList"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="协作人" prop="collaborator">
							<el-select filterable v-model="detailForm.collaborator" multiple disabled>
								<el-option :value="item.id" :label="item.name" v-for="item in userList"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<!-- <el-col :span="6">
						<el-form-item label="优先级" prop="level">
							<el-select filterable v-model="detailForm.level">
								<el-option value="低" label="低"></el-option>
								<el-option value="中" label="中"></el-option>
								<el-option value="高" label="高"></el-option>
								<el-option value="紧急" label="紧急"></el-option>
							</el-select>
						</el-form-item>
					</el-col> -->
					<!-- 
					<el-col :span="6">
						<el-form-item label="任务类型" prop="taskType">
							<el-select filterable v-model="detailForm.taskType">
								<el-option value="需求" label="需求"></el-option>
								<el-option value="设计" label="设计"></el-option>
								<el-option value="研发" label="研发"></el-option>
								<el-option value="缺陷" label="缺陷"></el-option>
							</el-select>
						</el-form-item>
					</el-col> -->
					<!-- <el-col :span="6">
						<el-form-item label="任务性质" prop="taskInfo">
							<el-select filterable v-model="detailForm.taskInfo">
								<el-option value="普通任务(TASK)" label="普通任务(TASK)"></el-option>
								<el-option value="问题缺陷(BUG)" label="问题缺陷(BUG)"></el-option>
							</el-select>
						</el-form-item>
					</el-col> -->
					<!-- <el-col :span="6">
						<el-form-item label="工作类型" prop="workType">
							<el-select filterable v-model="detailForm.workType">
								<el-option value="产品原型" label="产品原型"></el-option>
								<el-option value="UI设计" label="UI设计"></el-option>
								<el-option value="前端开发" label="前端开发"></el-option>
								<el-option value="数据库设计" label="数据库设计"></el-option>
								<el-option value="接口开发" label="接口开发"></el-option>
								<el-option value="对接接口" label="对接接口"></el-option>
								<el-option value="相关联调" label="相关联调"></el-option>
								<el-option value="系统测试" label="系统测试"></el-option>
								<el-option value="运维部署" label="运维部署"></el-option>
								<el-option value="需求调研" label="需求调研"></el-option>
								<el-option value="需求沟通" label="需求沟通"></el-option>
								<el-option value="参加会议" label="参加会议"></el-option>
							</el-select>
						</el-form-item>
					</el-col> -->
					<!-- <el-col :span="6">
						<el-form-item label="完成进度" prop="progress">
							<el-input v-model="detailForm.progress"></el-input>
						</el-form-item>
					</el-col> -->
					<el-col :span="6">
						<el-form-item label="预估工时" prop="workTime">
							<el-input :value="(new Date(detailForm.endTime).getTime() - new Date(detailForm.startTime).getTime()) / 1000 / 60 / 60 / 24" disabled></el-input>
						</el-form-item>
					</el-col>
					<!-- <el-col :span="6">
						<el-form-item label="实际工时" prop="workTime">
							<el-input v-model="detailForm.workTime" disabled></el-input>
						</el-form-item>
					</el-col> -->
					<el-col :span="6">
						<el-form-item label="计划开始日期" prop="startTime">
							<el-input v-model="detailForm.startTime" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="计划完成日期" prop="endTime">
							<el-input v-model="detailForm.endTime" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="实际完成日期">
							<el-date-picker v-model="detailForm.endRealyTime" type="date" readonly  value-format="yyyy-MM-dd HH:mm:ss">
							</el-date-picker>
							<!-- :value="new Date().toLocaleDateString().replace(/\//g,'-')" -->
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<!-- {{detailForm.endRealyTime?(new Date(detailForm.endRealyTime).getTime() - new Date(detailForm.startTime).getTime()) / 1000 / 60 / 60 / 24:0}} -->
						<el-form-item label="实际工时" prop="missionTime">
							<el-input v-model="detailForm.missionTime" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="关联产品" prop="productName">
							<el-input v-model="detailForm.productName" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="关联项目" prop="projectName">
							<el-input v-model="detailForm.projectName" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="任务状态" prop="missionState">
							<el-select v-model="detailForm.missionState" placeholder="请选择状态" filterable clearable @change="changeState" :disabled="(detailForm.projectState == 'WAIT_CHECK' || detailForm.projectState == 'CHECK') || (detailForm.adminUser != userId)">
								<el-option :label="item.dictLabel" :value="item.dictValue" v-for="item in stateList"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<!-- <el-form-item label="附件" prop="time">
					<a style="margin-right:20px;cursor:pointer;text-decoration:underline;color:blue;">附件1</a>
					<a style="margin-right:20px;cursor:pointer;text-decoration:underline;color:blue;">附件2</a>
					<a style="margin-right:20px;cursor:pointer;text-decoration:underline;color:blue;">附件3</a>
				</el-form-item> -->
				<el-form-item label="任务描述" prop="describe">
					<el-input type="textarea" v-model="detailForm.describe" placeholder="请输入描述" maxlength="1000"
						show-word-limit></el-input>
				</el-form-item>
				<!-- 				<el-form-item label="子任务" prop="describe">
					<el-button>新增子任务</el-button>
				</el-form-item> -->
				<!-- <el-form-item label="工作记录" prop="describe">
					<el-button type="primary" size="mini" @click="addWorkList">新增工作记录</el-button>
				</el-form-item>
				<el-table v-loading="loading" :data="list" border>
					<el-table-column label="工作内容" align="center" prop="orderName" fixed="left"
						width="200"></el-table-column>
					<el-table-column label="工作时间范围" align="center" prop="preOrderEndTime"></el-table-column>
					<el-table-column label="执行员工" align="center" prop="technologyManager"></el-table-column>
					<el-table-column label="记录时间" align="center" prop="endTime" width="200"></el-table-column>
				</el-table> -->
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="saveMission">保 存</el-button>
				<el-button @click="detailModel = false">关 闭</el-button>
			</span>
		</el-dialog>
		<el-dialog :visible.sync="workDialog" title="工作记录">
			<el-form ref="workForm" :model="workForm" label-width="100px" :rules="rules">
				<el-form-item label="选择人员" prop="orderName">
					<el-date-picker v-model="timeModel" type="datetimerange" range-separator="至"
						start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd hh:mm:ss" size="small">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="工作内容" prop="workDetail">
					<el-input v-model="workForm.workDetail" placeholder="请输入工作内容"></el-input>
				</el-form-item>
				<el-form-item label="补充内容" prop="describe">
					<el-input type="textarea" v-model="workForm.describe" placeholder="请输入补充内容" maxlength="1000"
						show-word-limit></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="personDialog = false">关 闭</el-button>
			</span>
		</el-dialog>
		<el-dialog :visible.sync="personDialog" title="人员管理">
			<el-form ref="personForm" :model="personForm" label-width="100px" :rules="rules">
				<el-form-item label="选择人员" prop="orderName">
					<el-select filterable multiple v-model="personForm.code">
						<el-option value="李越" label="李越"></el-option>
						<el-option value="霍东博" label="霍东博"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="personDialog = false">关 闭</el-button>
			</span>
		</el-dialog>
		<el-dialog :visible.sync="documentDialog" title="文档管理">
			<el-form ref="documentForm" :model="documentForm" label-width="100px" :rules="rules">
				<el-upload drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
					<i class="el-icon-upload"></i>
					<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				</el-upload>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="personDialog = false">关 闭</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		selMission,
		selectUser,
		selectDictionary,
		updateMission
	} from '@/api/workOrder.js'
	export default {
		name: "order",
		// 页面数据
		data() {
			return {
				queryParams: {
					pageNum: 1, // 显示第一页数据
					pageSize: 10, //每页显示十条
					beginTime: "",
					endTime: "",
					orderState: "",
				},
				productForm: {
					orderName: '',
					code: '',
					describe: ''
				},
				detailForm: {
					orderName: '',
					code: '',
					describe: '',
					status:''
				},
				workForm: {
					orderName: '',
					code: '',
					describe: ''
				},
				personForm: {
					orderName: '',
					code: '',
					describe: ''
				},
				documentForm: {
					orderName: '',
					code: '',
					describe: ''
				},
				stateList: [],
				loading: false,
				list: [],
				total: 0, // 一共多少条数据
				timeModel: [],
				productModel: false,
				detailModel: false,
				workDialog: false,
				personDialog: false,
				documentDialog: false,
				rules: {
					productName: [{
						required: true,
						message: "请您输入任务名称",
						trigger: "blur"
					}, ],
					code: [{
						required: true,
						message: "请选择负责人",
						trigger: "change"
					}, ],
				},
				floorList: [{
						name: '立项阶段',
						state: 1
					},
					{
						name: '产品阶段',
						state: 2
					},
					{
						name: '开发阶段',
						state: 3
					},
					{
						name: '交付阶段',
						state: 4
					}
				],
				tabPosition: "left",
				userList:[],
				userId: localStorage.getItem("userId"),
			};
		},
		// 初始化
		mounted() {
			selectDictionary({
				dictType: "mission_state"
			}).then(res => {
				this.stateList = res;
			})
			this.getList();
		},
		// 函数集合
		methods: {
			// 保存任务信息
			saveMission(){
				var str =  this.detailForm.endRealyTime;
				updateMission({
					missionState:this.detailForm.missionState,
					id:this.detailForm.id,
					missionTime:this.detailForm.missionTime,
					projectId:this.detailForm.projectId,
					endRealyTime:str
				}).then(res=>{
					if(res>0){
						this.detailModel = false
						this.$message.success("修改成功")
						this.getList();
					}else{
						this.$message.error("修改失败")
					}
				}).catch(err=>{
					this.$message.error("修改失败")
				})
			},
			// 修改任务状态
			changeState(e){
				if(e == 'FINISH'){
					// 完成
					var date = new Date();
					const Y = date.getFullYear()
					const M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
					const D = date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()
					const H = date.getHours() < 10? '0'+ date.getHours() : date.getHours()
					const m = date.getMinutes() < 10? '0'+ date.getMinutes() : date.getMinutes()
					const s = date.getSeconds() < 10? '0'+ date.getSeconds() : date.getSeconds()
					this.detailForm.endRealyTime = Y+"-"+M+"-"+D + " " + H + ":" + m + ":" + s
					this.detailForm.missionTime = this.detailForm.endRealyTime?parseInt((new Date(this.detailForm.endRealyTime).getTime() - new Date(this.detailForm.startTime).getTime()) / 1000 / 60 / 60 / 24):0
				}else{
					this.detailForm.endRealyTime = '';
					this.detailForm.missionTime = 0
				}
			},
			// 查询人员列表
			selectUser(){
				var that = this;
				selectUser().then(res=>{
					that.userList = res.rows;
				})
			},
			addWorkList() {
				this.workDialog = true;
			},
			addDocument() {
				this.documentDialog = true;
			},
			addPerson() {
				this.personDialog = true;
			},
			editProduct(row) {
				var that = this;
				var type = "";
				if (row.orderNo) {
					// 修改
					type = "edit";
					that.productForm = row;
				} else {
					// 新增
					type = "add";
				}
				this.dealType = type;
				this.productModel = true;
			},
			lookProduct(row) {
				var that = this;
				this.selectUser();
				this.detailForm = row;
				this.detailModel = true;
			},
			deleteProduct(row) {
				this.$confirm('是否删除该条任务?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {

				}).catch(() => {

				})
			},
			//提交任务
			submitProduct() {
				this.$refs["productForm"].validate((valid) => {
					if (valid) {
						this.productModel = false;
					}
				});
			},
			//初始化列表
			//接口查询项目列表
			getList() {
				this.loading = true;
				if (this.timeModel.length > 0) {
					this.queryParams.startTime = this.timeModel[0];
					this.queryParams.endTime = this.timeModel[1];
				}
				selMission({
					...this.queryParams
				}).then(res => {
					this.list = res.rows
					this.total = res.total
					this.loading = false;
				})
			},
			reset() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					beginTime: "",
					endTime: "",
					orderState: ""
				}
			},

		}
	}
</script>
<style scoped lang='scss'>
	.editBtn span {
		color: red;
	}

	.deleteBtn span {
		color: red;
	}

	.detailBtn span {
		color: red;
	}

	.table {
		width: 100%;
		table-layout: fixed;
		border-collapse: collapse;
		border-style: solid;
		border-width: 1px;
		border-color: #d1d1d1;
	}

	.table td {
		border-style: solid;
		border-width: 1px;
		border-color: #d1d1d1;
		padding: 0 10px;
	}

	.el-date-editor.el-input,
	.el-date-editor.el-input__inner {
		width: 100%;
	}
</style>